<template>
  <div class="hello">
    <Header></Header>
    <Swiper></Swiper>
    <Date :date="date"></Date>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="wrapper">
      <div class="tg">{{tg_content}}</div>
      <button
        v-show="tg_content && tg_content.length > 0"
        class="tag-read"
        :data-clipboard-text="tg_content"
        @click="copy"
      >复制日记</button>
    </van-pull-refresh>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import { PullRefresh, Toast } from "vant";
import Header from "@/components/header";
import Swiper from "@/components/swiper";
import Date from "@/components/date";
export default {
  name: "HelloWorld",
  components: {
    VanPullRefresh: PullRefresh,
    Header,
    Swiper,
    Date
  },
  data() {
    return {
      count: 0,
      isLoading: false,
      date: {
        day: "",
        wth: ""
      },
      tg_content: ""
    };
  },
  created() {
    this.handleGetTimeAndWth();
    this.handleGetTianGou();
    // this.handleGetTianGou();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.handleGetTianGou();
        this.isLoading = false;
      }, 1000);
    },
    //获取时间天气
    async handleGetTimeAndWth() {
      const date = await this.$http.get(
        "http://api.k780.com/?app=weather.today&weaid=1&appkey=49685&sign=2731453be5c8386b4a1235899f823883&format=json"
      );
      const res = date.data;

      if (res.success != "1") return;
      this.date.day = res.result.days;
      this.date.wth = res.result.weather;
    },
    //获取舔狗日记
    async handleGetTianGou() {
      const tg_days = await this.$http.get("http://api.03c3.cn/lowly/api/");
      const res = tg_days.data;

      if (res.status != 1) return Toast(res.msg);
      Toast("获取成功");
      this.tg_content = res.data.content.content;
    },
    //复制日记
    copy() {
      const cp = new Clipboard(".tag-read");
      cp.on("success", e => {
        Toast("复制成功");
        cp.destroy();
      });
      cp.on("error", e => {
        Toast("复制成功");
        cp.destroy();
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  flex: 1;
  // height: 100vh;
  overflow: auto;
  .wrapper {
    height: 667px;
    overflow: auto;
    .tg {
      width: 90%;
      margin: 20px auto 0;
      box-shadow: 0px 0px 10px 5px rgb(221, 221, 221);
      border-radius: 15px;
      padding: 15px;
      box-sizing: border-box;
      font-size: 16px;
    }
    .tag-read {
      margin: 30px auto;
      display: block;
      width: 120px;
      height: 40px;
      background-color: #633a82;
      border: none;
      outline-style: none;
      color: #fff;
      border-radius: 20px;
    }
  }
}
</style>
